<!DOCTYPE html>
<#import "/spring.ftl" as spring />
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/bootstrap3/bootstrap-theme.min.css'/>">
    <link rel="stylesheet" type="text/css"
          href="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.min.css'/>">
    <link rel="stylesheet" type="text/css" href="<@spring.url '/admin/css/mycss.css'/>">

    <title>TPO</title>
    <style>
        .message {
            padding: 5px 0;
        }

        .message p {
            padding: 5px;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                    aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">TPO Admin</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li><a href="<@spring.url '/admin/category/list'/>">分类</a></li>
                <li class="active"><a href="<@spring.url '/admin/article/list'/>">文章</a></li>
                <li><a href="<@spring.url '/admin/user'/>">用户</a></li>
            </ul>
        </div><!--/.nav-collapse -->
    </div>
</nav>

<div class="container">
    <h4>新增或编辑文章</h4>
    <div id="message" class="message">
        <#if successMessage?default('') != ''>
            <p class="bg-success">${successMessage}</p>
        </#if>
        <#if errorMessage?default('') != ''>
            <p class="bg-danger">${errorMessage}</p>
        </#if>
    </div>
    <form class="form-horizontal" method="post" action="/tpo/admin/article/save" enctype="multipart/form-data">
        <input type="hidden" name="id" value="${article.id!}">
        <div class="form-group">
            <label class="col-sm-2 control-label">tpo_name</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="tpo_name" name="tpo_name" value="${article.tpo_name!}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">order</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="order" name="order" value="${article.order!}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">分类</label>
            <div class="col-sm-10">
                <select class="form-control" name="categoryId" id="categoryId">
                    <#list categoryList as category>
                        <#if article.categoryId! == category.id >
                            <option value="${category.id}" selected="selected">${category.name_cn!}</option>
                            <#else>
                                <option value="${category.id}">${category.name_cn!}</option>
                        </#if>
                    </#list>
                </select>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">nameCn</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="nameCn" name="nameCn" value="${article.nameCn!}">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label">nameEn</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="nameEn" name="nameEn" value="${article.nameEn!}">
            </div>
        </div>
        <div class="form-group">
            <label for="articleEn">articleEn</label>
            <textarea class="form-control" rows="7" id="articleEn" name="articleEn">${article.articleEn!}</textarea>
        </div>
        <!--<div class="form-group">
            <label for="articleCn">articleCn</label>
            <textarea class="form-control" rows="7" id="articleCn" name="articleCn">${article.articleCn!}</textarea>
        </div>-->
        <div class="form-group">
            <label for="audioUrl">音频 [原音频URL：${article.audioUrl!}]</label>
            <input type="file" class="form-control" id="audioUrl" name="audioFile">
        </div>
        <div class="form-group">
            <label for="audioUrl">封面图片</label>
            <img src="${article.coverUrl!}" height="50px">
            <input type="file" class="form-control" id="coverUrl" name="coverFile">
        </div>
        <div class="form-group">
            <label for="reviewImageFile">内容回顾图片</label>
            <img src="${article.review_image_url!}" height="50px">
            <input type="file" class="form-control" id="reviewImageFile" name="reviewImageFile">
        </div>
        <div class="form-group">
            <label for="videoFile">视频 [原视频URL：${article.video_url!}]</label>
            <input type="file" class="form-control" id="videoFile" name="videoFile">
        </div>
        <button type="submit" class="btn btn-primary btn-lg"> 保 存</button>
    </form>
</div>

<script src="<@spring.url '/admin/js/jquery-3.2.1.min.js'/>"></script>
<script src="<@spring.url '/admin/js/popper.min.js'/>"></script>
<script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table.js'/>"></script>
<script src="<@spring.url '/admin/bootstrap3/bootstrapTable/bootstrap-table-zh-CN.min.js'/>"></script>
<script src="<@spring.url '/admin/ckeditor5-classic/ckeditor.js'/>"></script>
<script>

    ClassicEditor
        .create(document.querySelector('#articleEn'))
        .then(function (editor) {
            console.log(editor);
            console.log(Array.from(editor.ui.componentFactory.names()));
        })
        .catch(function (error) {
            console.error(error);
        });

    ClassicEditor
        .create(document.querySelector('#articleCn'))
        .then(function (editor) {
            console.log(editor);
        })
        .catch(function (error) {
            console.error(error);
        });

    function disableF5(event) {
        if (event) {
            var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
            if (keyCode == 116) {
                event.keyCode = 0;
                event.returnValue = false;
                return false
            }
        }
    }

    document.onkeydown = disableF5;
</script>
</body>
</html>